<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="/plugins/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/css/global.css" media="all">
    <link rel="stylesheet" href="/plugins/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/css/table.css"/>
    <title>交易对列表</title>
    <style type="text/css">
        .searcheBottom{margin-bottom: 10px;}
    </style>
</head>
<body>
<div class="admin-main">
<blockquote class="layui-elem-quote">
    <div class="demoTable">
        <div class="layui-inline searcheBottom">
            币种名称：
            <div class="layui-inline">
                <input id="transactionName" class="layui-input" name="transactionName" autocomplete="off" placeholder="币种名称"/>
            </div>
        </div>
        <div class="layui-inline searcheBottom">
            法币名称：
            <div class="layui-inline">
                <input id="enName" class="layui-input" name="enName" autocomplete="off" placeholder="法币名称"/>
            </div>
        </div>
        <div class="layui-inline searcheBottom">
            <a class="layui-btn" data-type="reload" id="search">搜索</a>
            <a class="layui-btn layui-btn-primary" id="reset">重置</a>
            <a data-opt="add" href="/manage/trading/addtrapage" id="trapageadd" class="layui-btn"><i class="layui-icon">&#xe608;</i>新增交易对</a>
            <a href="#" id="insertBatch" class="layui-btn"><i class="layui-icon">&#xe681;</i>批量上传</a>
        </div>
    </div>
</blockquote>
<span style="font-size: 16px;"><b>交易对列表</b></span>
<table class="layui-hide" id="traTable" lay-filter="tableFilter"></table>
</div>
<script type="text/javascript" src="/plugins/layui/layui.js"></script>
<script>
    layui.use(['jquery','table','laydate','layer','form','util','upload'],function(){
        var $=layui.jquery,table=layui.table,laydate = layui.laydate,
            layer = layui.layer,form = layui.form,util=layui.util,upload = layui.upload;

        pageInit();
        function pageInit() {
            //表格渲染
            table.render({
                elem:"#traTable",
                url:"/manage/trading/tralist",
                method:"post",
                cols:[[
                    {field:'id', title: 'ID', sort: true,align:'center'},
                    {field:'transactionName', title: '交易对',align:'center',templet:function (d) {
                        return d.transactionName + "/" + d.enName;
                    }},
                    /*                {field:'imageUrl', title: '图标',align:'center',templet:function (d) {
                     return '<div><img style="width: 50px;height: 50px;" src="'+d.imageUrl+'"></div>';
                     }},*/
                    {field:'createTime', title: '添加时间',sort: true,align:'center',
                        templet: function(d){
                            if(d.createTime !=null){
                                return util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm:ss');
                            }else {
                                return '';
                            }
                        }
                    },{title:"操作", align:'center',templet: function(d){
                        var tool = '<a class="layui-btn layui-btn-xs layui-btn" lay-event="edit">编辑</a>';
                        tool += '<a class="layui-btn layui-btn-xs  layui-btn-danger" lay-event="del">删除</a>';
                        return tool;
                    }}
                ]],
                limits:[10,15,20,25,30],
                limit:10,
                page:true
            });
        }
        //表格重载
        var active = {
            reload: function () {
                var transactionName = $('#transactionName');
                var enName = $('#enName');
                table.reload('traTable', {
                    where: {
                        transactionName: transactionName.val(),
                        enName:enName.val(),
                    }
                });
            }
        };

        //将搜索框的值随请求传到后台
        $('.demoTable #search').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        $(".layui-input").keydown(function (e) {
            if(e.keyCode == 13){
                $('#search').click();
            }
        });

        //重置
        $("#reset").on("click",function(){
            transactionName.value = '';
            enName.value = '';
        });

        //表格监听
        table.on('tool(tableFilter)', function(obj){
            var data = obj.data;
            if (obj.event == "edit") {
                location.href="/manage/trading/editTransaction?id="+data.id;
            }else if(obj.event == "del"){
                layer.confirm('确认删除所有同名交易对吗？', {
                    btn : [ '确定', '取消' ]//按钮
                }, function(index) {
                    layer.close(index);
                    $.ajax({
                        type : "post",
                        url : "/manage/trading/deltransaction",
                        dataType : "json",
                        data :{"id":data.id},
                        success : function(result) {
                            if (result.code >= 0) {
                                table.reload("traTable");
                            }else{
                                layer.msg(result.msg, { icon: 7, shift: 6 });
                            }
                        }
                    });
                });
            }
        });

        //文件上传
        upload.render({
            elem: '#insertBatch',
            url: '/manage/trading/uploadFile',
            size:'20480',
            exts:'xls|xlsx',
            before: function(obj) {
                layer.load();
            },
            done: function(res) {
                layer.closeAll('loading');
                //上传成功
                if (res.code == 0) {
                    layer.alert(res.msg);
                    pageInit();
                }else if (res.code == 1){
                    layer.msg(res.msg,{icon:5, shift: 6 });
                }else{
                    pageInit();
                    layer.alert(res.msg);
                }
            }
        });
    });

</script>
</body>
</html>